<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    @select="handleSelect"
    router="true"
  >
    <el-menu-item index="/testPage">测试页面</el-menu-item>
    <el-menu-item index="/echartPage">Echart</el-menu-item>
    <el-menu-item index="/eluiPage">elUi</el-menu-item>
    <el-sub-menu index="/mapPage">
      <template #title>地图</template>
      <el-menu-item index="/mapPage/one">地图 one</el-menu-item>
      <el-menu-item index="/mapPage/two">地图 two</el-menu-item>
      <!-- <el-menu-item index="2-3">item three</el-menu-item> -->
    </el-sub-menu>
    <!-- <el-menu-item index="/mapPage">地图</el-menu-item> -->
    <el-menu-item index="/algorithm">算法</el-menu-item>
  </el-menu>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'
const activeIndex = ref('/testPage')

// 监听路由变化，改变activeIndex的值
const route = useRoute()
// const currentPath = ref(route.path);
watch(
  () => route.path,
  newVal => {
    // 将路由中的path进行分割，只取路由中的第一个值
    activeIndex.value = '/' + newVal.split('/')[1]
  },
  { immediate: true } // 设置immediate为true，会在初次挂载时也执行一次
)
</script>
<style lang="scss" scoped>
.el-menu--horizontal {
  justify-content: center;
}
.el-menu-demo {
  height: 7%;
}
</style>
